<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<input class="ss" type="text">

<body>
    <script>
        /*
        1.返回防抖动的新函数
        2.原函数中的this,参数都可以正常使用

        在这个代码中，fn.call(this, ...args) 中的 this 指向的是触发事件的 DOM 元素，也就是输入框元素本身。
        */
        function debounce(fn, delay = 500) {
            let timer;
            // console.log(this)
            return function (...args) {
                clearTimeout(timer);
                timer = setTimeout(() => {
                    // console.log('this', this)
                    // console.log('args', args)
                    fn.call(this, ...args);
                }, delay);
            };
        }
        document.querySelector('.ss').addEventListener('input', debounce(function (e) {
            console.log(e.target.value)
            console.log('this', this)
        }, 500))
        //节流

    </script>
</body>

</html>